<template>
    <div class="teamDetail">
        <swiper :options="swiperOptions" :auto="2000" :height="165"/>
        <div class="teamDetail-content">
            <div class="teamDetail-ico"><img src="https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg"></div>
            <div class="teamDetail-name">天风证券固定收益团队</div>
            <div class="teamDetail-text">大金所以“让同业更开心”为宗旨 , 致力于利用互联网和云服务打造的同业平台，为金融机构在债券、同业、信托及基金等固收产品交易中解决信息不对称、不及时以及交易效率低、门槛和成本高以及信用风险等问题</div>
            <div class="mark">
                <div><img src="../../assets/Chevron-bottom.png" />查看全部</div>
            </div>
        </div>
        <div class="null"></div>
        <title-label class="bg-white" title="最新研报"/>
        <ul class="research">
            <li class="research-list" v-for="item in researchList">
                <div>
                    <span>{{item.title}}</span>
                    <span>{{item.name}}</span>
                    <span>{{item.date}}</span>
                </div>
                <img src="../../assets/research-list.png" />
            </li>
        </ul>
    </div>
</template>
<style lang="less" scoped>
    @import '../../style/variable';
    .teamDetail {
        background-color: @color-white;
        &-content {
            position: relative;
        }
        &-ico {
            width: 6rem;
            height: 6rem;
            margin: 0 auto;
            padding-top: 1.2rem;
            img {
                height: 100%;
            }
        }
        &-name {
            text-align: center;
            color: #303030;
            font-size: 1.6rem;
            margin: 1.1rem 0;
        }
        &-text {
            padding: 0 2rem 2rem 1.5rem;
            font-size: 1.4rem;
            color: #333E48;
        }
        .null {
            width: 100%;
            height: 0.8rem;
            background-color: #EFEFF4;
        }
        .mark {
            width: 100%;
            height: 5.5rem;
            position: absolute;
            bottom: 0rem;
            left: 0;
            color: #333E48;
            font-size: 1.4rem;
            text-align: center;
            background: url('../../assets/shadow-bottom.svg');

            div {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                img {
                    margin-right: 0.9rem;
                }
            }
        }
        .research {
            background-color: @color-white;
            padding-left: 1rem;
            .research-list {
                display: flex;
                border-bottom: 1px solid #CBCBCB;
                padding: 1.2rem 1.5rem 1.2rem 0;
                
                div {
                    display: flex;
                    flex-direction: column;
                    flex: 3;
                    margin-right: 1.3rem;

                    span:nth-of-type(2) {
                        font-weight: 700;
                        color: #999;
                    }

                    span:nth-of-type(3) {
                        color: #999;
                    }
                }

                img {
                    flex: 1;
                }
            }
        }
    }
</style>
<script>
    import { Swipe, SwipeItem } from 'vant';
    export default {
        components: {
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
        },
        data() {
            return {
                swiperOptions: [
                    {
                        src: 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
                        to: '/same'
                    },
                    'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
                ],
                researchList: [
                   {
                        img: 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                        title: '2017年 百家银行体检报告 21家银行晋身万亿资产俱乐部',
                        name: '中信证券 | 明明宏观团队',
                        date: '2017年11月4日 12:20'
                    }, 
                    {
                        img: 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                        title: '2017年 百家银行体检报告 21家银行晋身万亿资产俱乐部',
                        name: '中信证券 | 明明宏观团队',
                        date: '2017年11月4日 12:20'
                    }, 
                    {
                        img: 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                        title: '2017年 百家银行体检报告 21家银行晋身万亿资产俱乐部',
                        name: '中信证券 | 明明宏观团队',
                        date: '2017年11月4日 12:20'
                    }, 
                    {
                        img: 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                        title: '2017年 百家银行体检报告 21家银行晋身万亿资产俱乐部',
                        name: '中信证券 | 明明宏观团队',
                        date: '2017年11月4日 12:20'
                    }, 
                ]
            }
        },
    }
</script>